<template>
  <component :is="compName" @click="routeGo(item)" :index="compIndex" popper-class="base-menu__popper">
    <template slot="title" v-if="compName === 'el-submenu'">
      <span>
        {{ item.label }}
      </span>
    </template>
    <template v-else>
      <span slot="title">
        {{ item.label }}
      </span>
    </template>
    <BaseMenuItem v-for="subItem in item.children" :key="subItem.index" :item="subItem" />
  </component>
</template>

<script>
export default {
  name: 'BaseMenuItem',
  props: {
    item: {
      type: Object,
    },
  },
  data() {
    return {}
  },
  computed: {
    compName() {
      const { children } = this.item
      return children && children.length > 0 ? 'el-submenu' : 'el-menu-item'
    },
    compIndex() {
      const { url, children, menuId } = this.item
      return children && children.length > 0 ? String(menuId) : url
    },
  },
  methods: {
    routeGo(navMenu) {
      if (this.$route.path === navMenu.url) {
        return
      }
      this.$store.commit('setRouterList', [])
      this.$router.push({ path: navMenu.url }).catch(() => {})
    },
  },
}
</script>

<style></style>
